import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import { Button, Select, Input } from 'antd';
import Session from '../../../utils/Session'
import './index.css'

const { Option } = Select; 
class CouponHeader extends Component {
    state = {
        inputType:'code',
        inputValue:""
    }

    handleSearchChange = (value) =>{        
        //清空输入框内容
        this.setState({
            inputValue:'',
            inputType:value
        })
    }

    //选择优惠券类型
    handleTypeChange = (value) =>{
        this.handleSearch('type',value);
    }

    //选择优惠券状态
    handleStatusChange = (value) =>{
        this.handleSearch('status',value);
    }    

    //点击搜索按钮
    handleSubmit = () =>{
        let _obj = {
            code:'',
            name:'',
            createUserName:'',
        }
        _obj[this.state.inputType] = this.state.inputValue;
        this.props.onHandleCheck(_obj);          
    }  

    //触发父组件筛选
    handleSearch = (key,value) =>{
        this.props.onHandleCheck({
            [key]:value
        })        
    }

    handleAdd(){
        //点击“创建优惠券”
        console.log(this.props)        
        this.props.history.push('/couponManage/createCoupon');  
    }
    
    render() {
        return (
            <div style={{ marginBottom: 30 }}>
                <div className="topBox clearfix">
                    <Button type="primary" onClick={this.handleAdd.bind(this)}>创建优惠券</Button>
                </div>
                <div className="bottomBox">
                    <span>筛选:</span>
                    <Select
                        showSearch
                        style={{ width: 150,margin:'0 10px' }}
                        placeholder="优惠券类型"
                        optionFilterProp="children"
                        onChange={this.handleTypeChange}
                        allowClear
                        filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                        {
                            Session.couponTypeList.map((item)=>(
                                <Option key={ item.id } value={ item.id }>{ item.name }</Option>
                            ))
                        }
                    </Select>
                    <Select
                    showSearch
                    style={{ width: 100 }}
                    placeholder="状态"
                    optionFilterProp="children"
                    onChange={this.handleStatusChange}
                    allowClear
                    filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    >
                        {
                            Session.couponStatusList.map((item)=>(
                                <Option key={ item.id } value={ item.id }>{ item.name }</Option>
                            ))
                        }
                    </Select>       
                    <Select
                        showSearch
                        defaultValue={ this.state.inputType }
                        style={{ width: 120,marginLeft: 30 }}
                        optionFilterProp="children"
                        onChange={this.handleSearchChange}
                        filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                        >
                            <Option value="code">编码</Option>
                            <Option value="createUserName">创建人</Option>
                            <Option value="name">优惠券名称</Option>
                        </Select>
                    <Input style={{width:'170px',margin: '0 10px'}} placeholder="请输入搜索关键内容" value={ this.state.inputValue } onChange={ (e)=> { this.setState({inputValue:e.target.value}) } } onPressEnter={this.handleSubmit}/>
                    <Button type="primary" onClick={this.handleSubmit}>搜索</Button>                                                          
                </div>
            </div>
        )
    }
}

export default withRouter(CouponHeader)